<template>
    <div class="detail">
        <VHeader title="我要学习" />
        <div class="title" v-text="item.title"></div>
        <div class="thumb">
            <img :src="item.thumbImage" width="100%">
        </div>
        <div class="content" v-html="item.contents"></div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                item: {},
            }
        },
        methods: {
            async getItem(id){
                let res = await this.$http({
                    method: 'api.Article.getDetail',
                    id,
                });
                this.item = res.data.info;
            }
        },
        mounted() {
            this.getItem(this.$route.params.id);
        }
    }
</script>

<style lang="scss" scoped>
    .detail {
        font-size:14px;
        padding: 15px;
        .title {
            font-size: 150%;
            padding: 0.2rem 0;
            border-bottom: 1px solid #378EEF;
            text-align: center;
        }
        .thumb {
            margin: 0.5rem 0;
        }
        .content {
            line-height: .6rem;
        }
    }
</style>